<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholderStyle="color: #fff;" placeholder="搜索"
              border="none" color="#fff" shape="circle" v-model="search" @confirm="searchChange">
              <clIcon slot="prefix" type="icon-sousuo_o" color="#fff" size="25"></clIcon>
            </u--input>
          </view>
		  <template v-if="pageSource != 'cgd'">
		  	<view class="flex flex-c f-35"> 总存款 </view>
		  	<view class="flex flex-c f-30 m-b-20"> 27112 </view>
		  </template>
          
        </template>
      </view>
    </hx-navbar>
    <view class="flex flex-c f-30 c-yellow" :class="pageSource == 'cgd'?'m-t-130':'m-t-240'"> </view>
    <u-list @scrolltolower="scrolltolower" style="padding:0 20rpx 20rpx;">
      <u-list-item v-for="(item, index) in indexList" :key="index" class="list-item">
        <u-cell :title="item.name" center @click="pushCustomDetails(item)" v-if="pageSource == 'cgd'">
          <u-avatar slot="icon" size="35" src="https://cdn.uviewui.com/uview/album/1.jpg" customStyle="margin: -3px 5px -3px 0"></u-avatar>
        </u-cell>
		<u-cell titleStyle="font-weight:bold;" :title="item.name" :value="item.originAmount" :label="`存款  ${item.remainAmount}`" @click="pushCustomDetails(item)" v-else>
			<u-avatar slot="icon" size="40" src="http://trustcdn.baidu.com/officialcard/47fb42e1807316ca05ae2bb9ce7ffeae_originalsize.png" shape="square" customStyle="margin: -3px 5px -3px 0;border-radius:100%;overflow:hidden;"></u-avatar>
			<view
				slot="value"
				class="u-slot-value"
			>
				<text class="u-cell-text m-t-36 f-24">{{item.originAmount}}</text>
			</view>
		</u-cell>
      </u-list-item>
    </u-list>
    <!-- 普通账户用的权限 -->
    <!-- <cxBankListStyle bankCode="ABC" bankName="中国农业银行" cardCode="5106365987639"/> -->
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import cxBankListStyle from "@/components/cx-bank-list/cx-bank-list-style.vue";
import { getlistPage} from "@/apis/bill/information/account";
export default {
  components: {
    clIcon,
    cxBankListStyle
  },
  data() {
    return {
      search: null,
      indexList: [],
      pages: {
        current: 1,
        size: 20,
      },
      config: {
        title: "账户",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
	  // 页面来源
	  pageSource: ''
    };
  },
	onLoad(opt) {
		this.pageSource = opt.source
	},
  onShow() {
    this.pages= {
        current: 1,
        size: 20,
      },
    this.indexList = []
    this.initData();
  },
  methods: {
    scrolltolower(e) {
      this.pages.current++;
      this.initData();
      // 到底了
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      let _this = this;
      let billId = {
        data: {
          keywords: this.search,
          // "shopId": "-1"
        },
        page: {
          current: _this.pages.current,
          size: _this.pages.size,
          sort: "",
          order: "desc",
          total: 0,
        },
      };
      // console.log("billId", billId);
      getlistPage(billId).then((res) => {
        // console.log('res', res)
        if (!res.flag) return;
        const data = res.data || {};
        this.indexList = [...data.records, ...this.indexList];
      });
    },
    pushCustomDetails(item) {
      this.$Router.push({
        path: "/pages/application/pages/finance/account/account-details/account-details",
        query:{
          id:item.id
        }
      });
    },
    searchChange() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
		uni.navigateTo({
			url: `/pages/application/pages/finance/account/account-details/account-details?source=${this.pageSource}`
		})
        // this.$Router.push({
        //   name: "financeAccountDetails",
        // });
      } else if (item.key === "btn2") {
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
.list-item {
	background-color: #fff;
	border-radius: 10rpx;
	margin-top: 20rpx;
	box-shadow: 0 10rpx 15rpx #dfdfdf;
	border-bottom: none;
}
.u-slot-value {
	color: #909193;
}
</style>
